import React, { Component } from 'react'
import { Button, Form, Input, Toast } from "antd-mobile";
import Headers from '../../components/Header/Header'
import { reqLogin } from '../../request/api';
import './Login.less'
import logo from '../../assets/img/login_logo.png'



export default class Login extends Component {
  constructor() {
    super()
    this.state = {
      user: {
        phone: '',
        password: ''
      }
    }
  }

  render() {
    let { user } = this.state;
    return (
      <div className='login'>
        <Headers back title='登录' register></Headers>
        <div>{JSON.stringify(user)}</div>
        <div className='form'>
         <div className='logo'>
           <img src={logo} alt="" />
         </div>
        <Form layout="horizontal">
          <Form.Item label="手机号" name="phone">
            <Input
              placeholder="请输入手机号"
              clearable
              //   defaultValue={user.phone}
              onChange={(e) => this.changeUser(e, "phone")}
            />
          </Form.Item>

          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              //   defaultValue={user.password}
              onChange={(e) => this.changeUser(e, "password")}
            />
          </Form.Item>
        </Form>

        <div className="text-center">
          <Button color="primary" onClick={this.login}>登录</Button>
        </div>
        </div>
      </div>
    )
  }
  changeUser(e, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: e,
      },
    });
  }
  login=()=> {
    reqLogin(this.state.user).then(res => {
      if (res.data.code == 200) {
        // 登录成功
        Toast.show({
          content: res.data.msg
        })
        // 将用户信息存入本地
        sessionStorage.setItem('userinfo',JSON.stringify(res.data.list))
        // 跳转
        this.props.history.push('/index/home')
      } else {//失败
        Toast.show({
          content: res.data.msg
        })
      }
    })
  }
}
